<template>
<!-- 中共二大 第一部党章 -->
    <div class="bg">
        <!-- 党章 -->
        <div class="dangzhang animated bounceInDown">
            <img src="../assets/dangzhang.jpg" alt="党章">
        </div>

        <!-- 会议地址 -->
        <div class="dz animated fadeInRight">
            <img src="../assets/erdahuizhi.jpg" alt="会址">
        </div>

         <!-- 文字 -->
        <div class="title">
            <p class="animated fadeInUp" style=" animation-delay:1s">1922年7月16日至23日</p>
            <p class="animated fadeInUp" style=" animation-delay:2s">中国共产党第二次全国代表大会在</p>
            <p class="animated fadeInUp" style=" animation-delay:2s">上海南成都路辅德里625号召开</p>
            <p class="animated fadeInUp" style=" animation-delay:3s">会议制定通过了党的历史上第一部正式的党章</p>
        </div>

        <el-tooltip class="item" effect="dark" content="下一页" placement="bottom">
      <el-button type="danger" icon="el-icon-caret-bottom" circle class="btn animated pulse" @click="btn"></el-button>
    </el-tooltip>

  <!-- 步骤条 -->
    <div class="bzt">
       <el-steps :space="70" :active="1" finish-status="success">
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
      <el-step></el-step>
    </el-steps> 
    </div>

    </div>
</template>


<script>
export default {
    methods: {
        btn() {
            // 跳转
            this.$router.push({path:"/index4"})
        }
    },
}
</script>

<style scoped>
.bg {
    width: 100%;
    height: 100%;
    background-image: url("../assets/background1.png");
    background-size: 100% 100%;
    z-index: -2;
    float: left;
}

.dangzhang {
    position: absolute;
    top: 5%;
    left: 5%;
    width: 13rem;
    height: 15rem;
    animation-duration: 1500ms;
}
.dangzhang img {
    width: 100%;
    height: 100%;
}

.dz {
    width: 25rem;
    height: 15rem;
    position: absolute;
    top: 5%;
    left: 70%;
}
.dz img {
    width: 100%;
    height: 100%;
}

/* 文字部分样式 */
.title {
    width: 40rem;
    height: 15rem;
    /* background-color: crimson; */
    margin: auto;
    position: relative;
    top: 30%;
    background-image: url("../assets/dhk.png");
    background-size: 100% 100%;
    padding-top: 1rem;
}
.title p {
    text-align: center;
    font-weight: 700;
    font-size: 800;
    animation-duration: 1s;
    font-size: 20px;
    color: #f1f0e8;
}

.btn {
    /* margin: auto; */
    position: relative;
    left: 50%;
    top: 45%;
    animation-iteration-count: infinite;
    animation-duration: 2000ms;
    background-color: orangered;
    border: 1px solid #ffffff;
}

.item {
      margin: 4px;
    }

    .bzt{
    width: 30rem;
    position: absolute;
    left: 40%;
    top: 90%;
   
}
</style>